<template>
  <router-view v-slot="{ Component }">
    <transition name="flip" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
  <BottomTabbar v-if="showTabbar" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import BottomTabbar from '@/components/BottomTabbar.vue'

const route = useRoute()
const showTabbar = computed(() => !['/login'].includes(route.path))
</script>

<!-- <style scoped>
/* 3D翻转效果 */
.flip-enter-active {
  animation: flip-in 0.5s ease-out;
}

.flip-leave-active {
  animation: flip-out 0.5s ease-in;
}

@keyframes flip-in {
  from {
    transform: rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flip-out {
  from {
    transform: rotateY(0deg);
    opacity: 1;
  }
  to {
    transform: rotateY(90deg);
    opacity: 0;
  }
}
</style> -->